// 当前正在编辑的菜单对象
var ot = null;
var menu_config = {
    width: 0//宽度 0，1，2，3
}
// 一级菜单点击事件
$(document).off().on('click', '.menu-item .menu-item-label', function () {
    var t = $(this);
    if (!t.parent().hasClass('ac')) {
        $('.menu-item').removeClass('ac');
        t.parent().addClass('ac');
    }

    $('.child-menu-item').removeClass('active');
    // 呼出编辑器 假装动态加载（‘—’）！！！
    _load(function () {
        $('.wx-editor-show').show(), $('.editor-tips').hide();
    }, 200)

    setFormVal(getMenuVal(t), 1);
    if (t.parent().find('.child-menu-item').length > 0) {
        delMenuVal(t);
    } else {
        $('.cjb-radio-group').show();
    }
    ot = t;
})

// 二级菜单点击事件
$(document).on('click', '.child-menu-item .child-menu-item-label', function () {
    var t = $(this);
    if (!t.parent().hasClass('active')) {
        $('.child-menu-item').removeClass('active');
        t.parent().addClass('active');
    }
    // 执行输入框显示
    $('.cjb-radio-group').show();
    //$('.cjb-val-group').show();
    // 呼出编辑器 假装动态加载（‘—’）！！！
    _load(function () {
        $('.wx-editor-show').show(), $('.editor-tips').hide();
    }, 200)
    setFormVal(getMenuVal(t), 2);
    ot = t;
})

// 设置菜单内容
function setMenuVal(arr) {
    ot.attr('name', arr['name']);
    if (arr['type'] != '') ot.attr('type', arr['type']);

    if (arr['type'] == 'miniprogram') {
        ot.attr('appid', arr['appid']);
        ot.attr('pagepath', arr['pagepath']);
        ot.attr('url', arr['url']);
    } else {
        if (arr['val'] != '') ot.attr('val', arr['val']);
    }
}

// 设置编辑器内容
function setFormVal(val_arr) {
    $("input[name='cjb-name']").val(val_arr['name']);
    if (val_arr['type'] != 'undefined') {
        $(".cjb-radio").removeClass('select');
        $(".cjb-radio[type='" + val_arr['type'] + "']").addClass('select');
        if (val_arr['type'] == 'view') {
            $('.type-view').show();
            $('.type-miniprogram').hide();
            $('.type-click').hide();
            $("input[name='view-val']").val(val_arr['val'])
        } else if (val_arr['type'] == 'miniprogram') {
            $(".type-click").hide();
            $('.type-view').hide();
            $('.type-miniprogram').show();
            $("input[name='app-id']").val(val_arr['appid'])
            $("input[name='app-path']").val(val_arr['pagepath'])
            $("input[name='app-url']").val(val_arr['url'])
        } else {
            $('.type-click').show();
            $('.type-view').hide();
            $('.type-miniprogram').hide();
            $("input[name='click-val']").val(val_arr['val'])
        }
    }
}

// 获取菜单内容
function getMenuVal(obj) {
    var arr = new Array();
    arr['name'] = obj.attr('name');
    arr['type'] = obj.attr('type');
    if (arr['type'] == 'miniprogram') {
        arr['appid'] = obj.attr('appid');
        arr['pagepath'] = obj.attr('pagepath');
        arr['url'] = obj.attr('url');
    } else {
        arr['val'] = obj.attr('val');
    }

    return arr;
}

// 删除菜单属性和隐藏输入框
function delMenuVal(obj) {
    // layer.msg('已自动清除菜单类型和值');
    obj.removeAttr('type');
    obj.removeAttr('val');
    // 执行输入框隐藏
    $('.cjb-radio-group').hide();
    $('.cjb-val-group').hide();
}

// 单选框选择事件
$('.cjb-radio').on('click', function () {
    if (!$(this).hasClass('select')) {
        $(this).addClass('select').siblings('.cjb-radio').removeClass('select');
        if ($('.select').attr('type') == 'view') {
            $('.type-click').hide();
            $('.type-view').show();
            $('.type-miniprogram').hide();
        } else if ($('.select').attr('type') == 'miniprogram') {
            $('.type-click').hide();
            $('.type-view').hide();
            $('.type-miniprogram').show();
        } else {
            $('.type-click').show();
            $('.type-view').hide();
            $('.type-miniprogram').hide();
        }
    }
})

// 获取表单内容
function getFormVal() {
    var arr = new Array();
    arr['name'] = $("input[name='cjb-name']").val();
    arr['type'] = getRadioVal();
    if (arr['type'] == 'miniprogram') {
        arr['appid'] = $("input[name='app-id']").val();
        arr['pagepath'] = $("input[name='app-path']").val();
        arr['url'] = $("input[name='app-url']").val();
    } else if (arr['type'] == 'click') {
        arr['val'] = $("input[name='click-val']").val();
    } else if (arr['type'] == 'view') {
        arr['val'] = $("input[name='view-val']").val();
    }
    return arr;
}

// 获取单选框选中的值
function getRadioVal() {
    var val;
    $('.cjb-radio').each(function () {
        if ($(this).hasClass('select')) {
            val = $(this).attr('type');
        }
    });
    return val;
}
// 字符长度
function strlen(str) {
    var len = 0;
    for (var i = 0; i < str.length; i++) {
        var c = str.charCodeAt(i);
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
            len++;
        }
        else {
            len += 2;
        }
    }
    return len;
}

// 添加一级菜单
$(document).on('click', '.add-menu', function () {
    $(this).parent().find('.menu-item').length == 2 ? $(this).hide() : '';
    if ($(this).parent().find('.menu-item').length >= 3) {
        return false;
    }
    var html = '';
    html += '<li class="menu-item">';
    html += '<span class="item-text menu-item-label" name="菜单名称" type="view">菜单名称</span>';
    html += '<ul class="menu-child-list">';
    html += '<span class="triangle"><em></em></span>';
    html += '<li class="add-item"><i class="fa fa-plus"></i></li>';
    html += '</ul>';
    html += '</li>';
    $(this).before(html);
    setMenuWidth();
})

/*添加二级菜单*/
$("body").off().on('click', '.add-item', function () {
    const t = $(this);
    delMenuVal(t.parents('.menu-item').children('span'));
    const list_length = t.parent().find('.child-menu-item').length + 1;
    if (list_length > 4) t.hide();
    var child_html = null;
    child_html = "<li class=\"child-menu-item\"><span class='item-text child-menu-item-label' name=\"子菜单" + list_length + "\" type=\"view\">子菜单" + list_length + "</span></li>";
    t.parent().prepend(child_html);
})

// 删除菜单
$('.menu-delete').on('click', function () {
    ot.parent().remove();
    // 执行表单隐藏
    $('.wx-editor-show').hide();
    $('.editor-tips').show();
    // 显示添加按钮
    if ($('.wx-footer').find('.menu-item').length < 3) {
        $('.add-menu').show();
    }
})

// 菜单名称编辑
$("input[name='cjb-name']").keyup(function () {
    var val = $(this).val();
    ot.text(val);
})

// 保存修改
$('.set_menu').on('click', function () {
    var formValue = getFormVal();
    if (formValue.name == '') {
        layer.msg('菜单名不能为空');
    } else if (formValue.type == 'view' && formValue.val == '') {
        layer.msg('菜单值不能为空');
    } else if (formValue.type == 'view' && formValue.val.indexOf("http") == -1) {
        layer.msg('请输入包含http://或者https://的完整链接');
    } else if (formValue.type == 'miniprogram' && formValue.appid == '') {
        layer.msg('Appid 不能为空');
    } else {
        setMenuVal(getFormVal());
        layer.msg('修改成功');
    }
})
setMenuWidth();
// 设置菜单宽度
function setMenuWidth() {
    //var item_length = $('.wx-footer').children().length;
    //var _width;
    //if (item_length > 3) {
    //    _width = 100 / (item_length - 1);
    //} else {
    //    _width = 100 / item_length;
    //}
    $('.wx-footer').children().each(function () {
        //$(this).width(_width + '%');
        $(this).addClass('width' + menu_config.width);
    })
    //console.log(item_length);
}

/**
 * 编辑器加载方法
 * @param callback 回调方法
 * @param out_time 停止时间
 * @private
 */
function _load(callback, out_time) {
    $('.editor-load').show();
    $('.wx-editor-show').hide();
    var load = setTimeout(function () {
        $('.editor-load').hide();
        clearTimeout(load);
        if (typeof callback == 'function') {
            callback();
        }
    }, out_time)
}

/**
 * 获取菜单数据对象
 * @returns {{menu: {button: Array}}}
 */
function getMenuList() {
    var arr = [], i = 0, child_list = [];
    $('.menu-item').each(function () {
        var than = $(this);
        var t = than.children('.menu-item-label');
        var type = t.attr('type');
        const item = {
            'name': t.attr('name')
        };

        var child_length = than.find('.child-menu-item').length;
        if (child_length == 0) {
            if (typeof type != 'undefined') {
                item.type = type;
                if (type == 'miniprogram') {
                    item.appid = t.attr('appid');
                    item.pagepath = t.attr('pagepath');
                    item.url = t.attr('url');
                } else if (type == 'view') {
                    item.url = t.attr('val');
                } else {
                    item.key = t.attr('val');
                }
            }
        } else {
            var i = 0;
            than.find('.child-menu-item').each(function () {
                var child_than = $(this);
                var ct = child_than.children('.child-menu-item-label');
                var name = ct.attr('name');
                var type = ct.attr('type');
                var val = ct.attr('val');
                child_list[i] = {
                    'name': name,
                    'type': type
                }
                if (type == 'miniprogram') {
                    child_list[i].appid = ct.attr('appid');
                    child_list[i].pagepath = ct.attr('pagepath');
                    child_list[i].url = ct.attr('url');
                } else if (type == 'view') {
                    child_list[i].url = val;
                } else {
                    child_list[i].key = val;
                }
                i++;
            })
            item.sub_button = child_list;
        }
        // 清除内存
        child_list = [];
        arr.push(item);
    })
    //console.log(arr);
    // 整理并返回数据
    //return ({
    //    'menu': {
    //        "button": arr
    //    }
    //});
    return ({"button": arr});
}

/**
 * 初始化菜单方法
 * @param object data 菜单的json数据
 */
function setMenuList(data) {
    var obj = (data && data.button);
    if (obj == undefined)obj = [];
    // 先删除所有菜单
    $('.menu-item').remove();
    menu_config.width = (obj.length);
    $('.add-menu').addClass("width" + menu_config.width);
    setMenuWidth();
    for (var i in obj) {
        var type = '', val = '';
        if (typeof obj[i].type != 'undefined') {
            type = obj[i].type;
        }
        if (typeof obj[i].url != 'undefined') {
            val = obj[i].url;
        } else if (typeof obj[i].key != 'undefined') {
            val = obj[i].key;
        }
        var html = '';
        html += '<li class="menu-item width' + menu_config.width + '">';
        html += '<span class="item-text menu-item-label" name="' + obj[i].name + '" type="' + type + '" val="' + val + '"';
        if (type == 'miniprogram')html += ' appid="' + obj[i].appid + '" pagepath="' + obj[i].pagepath + '" url="' + obj[i].url + '"';
        html += '>' + obj[i].name + '</span>';
        html += '<ul class="menu-child-list">';
        var count_child_menu = 0;
        if (typeof obj[i].sub_button != 'undefined') {
            for (var j in obj[i].sub_button) {
                var v = '';
                v = obj[i].sub_button[j].type == 'view' ? obj[i].sub_button[j].url : obj[i].sub_button[j].key;
                html += '<li class="child-menu-item"><span class="item-text child-menu-item-label" name="' + obj[i].sub_button[j].name + '" type="' + obj[i].sub_button[j].type + '" val="' + v + '">' + obj[i].sub_button[j].name + '</span></li>';
                count_child_menu++;
            }
        }
        // alert(count_child_menu);
        html += '<span class="triangle"><em></em></span>';
        if (count_child_menu >= 5) {
            html += '<li class="add-item" style="display: none;"><i class="fa fa-plus"></i></li>';
        } else {
            html += '<li class="add-item"><i class="fa fa-plus"></i></li>';
        }
        html += '</ul>';
        html += '</li>';
        $('.add-menu').before(html);
        setTimeout(function () {
            // $('.add-menu').before(html);
        }, 1000)
    }
}
// 得到适用于微信自定义菜单接口格式的数据
$('.create_menu').on('click', function () {
    //
    var info = getMenuList();
    $("#json").text(JSON.stringify(info, null, '    '));
})